<template>
  <view class="index">
    <scroll-view style="height:100vh" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" refresher-background="#f8f4f3" @refresherrefresh="onRefresh" @scrolltolower='lower'>
      <view v-for="(item, index) in userList" :key="index">
        <view class="index-box" v-if="userList && userList.length > 0">
          <!-- 头像 -->
          <view class="avatar">
            <view class="avatar-box">
              <u-image width="120rpx" height="120rpx" :src="item.wxAvatar" v-if="item.wxAvatar" shape="circle" @click="goUserHome(item.userId)"></u-image>
              <u-image width="120rpx" height="120rpx" src="/static/img/avatar.png" shape="circle" v-else @click="goUserHome(item.userId)"></u-image>
              <view class="userId">
                <view class="fans">
                  <view class="phonenumber" @click="goUserHome(item.userId)"> {{item.nickName}} </view>
                  <u-tag text="取关" type="error" plain @click="handleLike" v-if="item.isLike" size="mini"></u-tag>
                  <u-tag text="关注" type="warning" plain @click="handleLike" v-else size="mini"></u-tag>
                </view>
                <view class="info" @click="goUserHome(item.userId)"> 粉丝: {{item.funNum}} </view>
              </view>
            </view>
            <view class="go-home" @click="goUserHome(item.userId)">进入主页></view>
          </view>
        </view>
        <view v-else style="margin-top: 100rpx;">
          <s-empty></s-empty>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import { goodsLikeApi, userMyLikeApi } from "@/sheep/api";

export default {
  data() {
    return {
      titleHeight: 0,
      customTop: 0,
      goodsQuery: {
        pageNum: 1,
        pageSize: 10,
        load: true,
      },
      userList: [],
      triggered: false,
      loadStatus: "",
      contentText: {
        contentdown: "查看更多",
        contentrefresh: "加载中",
        contentnomore: "没有更多了",
      },
    };
  },
  onLoad() {
    this.getHeight();
    this.getUserList();
  },
  methods: {
    // 获取微信右上角胶囊高度
    getHeight() {
      let res = uni.getMenuButtonBoundingClientRect();
      this.titleHeight = res.top + res.height + 16;
      this.customTop = res.top + 3;
    },
    async handleCardiac(goodsId) {
      let res = await goodsLikeApi({ goodsId: goodsId });
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
      if (res.code == 200) {
        this.goodsQuery.pageNum = 1;
        this.getUserList();
      }
    },
    goUserHome(userId) {
      uni.navigateTo({
        url: "/pages/userHome/index?userId=" + userId,
      });
    },
    // 下拉刷新
    onRefresh() {
      this.triggered = true;
      this.userList = [];
      this.goodsQuery.pageNum = 1;
      this.getUserList();
    },
    // 触底了
    lower() {
      if (this.loadStatus !== "noMore") {
        this.goodsQuery.pageNum++;
        this.getUserList();
      }
    },
    getUserList() {
      userMyLikeApi().then((res) => {
        this.userList = this.userList.concat(res.rows);
        this.triggered = false;
        if (res.rows?.length < this.goodsQuery.pageSize) {
          this.loadStatus = "noMore";
        } else {
          this.loadStatus = "more";
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.index {
  background-color: #eee;
  height: 100vh;
  .index-box {
    padding: 30rpx 30rpx 0 30rpx;
    .avatar {
      padding: 30rpx;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .avatar-box {
        height: 50%;
        display: flex;
        margin-bottom: 20rpx;
        .userId {
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .fans {
            display: flex;
            .phonenumber {
              display: flex;
              align-items: center;
              font-weight: 700;
              margin-right: 10rpx;
            }
          }
          .info {
            font-size: 26rpx;
            color: #999999;
          }
        }
      }
      .go-home{
        color: #999999;
        font-size: 26rpx;
      }
    }
  }
}
</style>
